<template>
	<gracePage headerBG="#FFFFFF" statusBarBG="#EB5D4B" :isSwitchPage="false">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#FFFFFF" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left grace-black" style="opacity: 0;"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;font-size: 30rpx;">购物车</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body" style="padding-bottom: 100rpx;">
			<!-- 购物车为空 -->
			<view v-if="shoppingCard.length < 1" style="margin-top:150px;">
				<graceEmpty>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">您的购物车空空如也~</text>
				</graceEmpty>
			</view>
			<view style="height:38rpx;"></view>
			<!-- 购物车主结构  -->
			<view class="grace-shoppingcard" v-for="(goods, index) in shoppingCard" :key="index">
				<view class="grace-shoppingcard-goods">
					<view class="grace-shoppingcard-goods-checkbtn grace-flex-vcenter grace-flex">
						<graceCheckBtn :checked="goods.checked" @change="itemChange(index)"></graceCheckBtn>
					</view>
					<image :src="gRequest.apiUrlImages+goods.image" style="height: 180rpx;width: 180rpx;" class="grace-shoppingcard-goods-image" mode="scaleToFill"></image>
					<view class="grace-shoppingcard-goods-body">
						<view class="grace-shoppingcard-goods-title">{{ goods.name}}</view>
						<view class="grace-space-between">
							<text class="grace-shoppingcard-goods-price">￥{{ goods.price }}</text>
							<view class="grace-shoppingcard-goods-number">
								<graceNumberBox
									:disabled="true"
									:index="index"
									inputPadding="5rpx"
									:value="goods.quantity"
									:maxNum="100"
									:minNum="1"
									:datas="String(goods.quantity)"
									v-on:change="numberChange"
								></graceNumberBox>
							</view>
						</view>
						<text class="grace-shoppingcard-remove grace-icons icon-remove" @tap="removeGoods" :id="index">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view slot="gBody" class="grace-nowrap grace-flex-vcenter grace-border-t" style="background-color:#FFFFFF;position: fixed;left: 0;bottom: 0rpx;width: 100%;">
			<view class="grace-shoppingcard-checkbtn grace-nowrap grace-flex-vcenter">
				<graceCheckBtn :checked="true" @change="itemChangeAll">
					<text class="grace-text">{{ selectText }}</text>
				</graceCheckBtn>
			</view>
			<view class="grace-shoppingcard-count grace-nowrap grace-flex-vcenter">
				<text class="grace-text">合计 :</text>
				<text style="font-size:32rpx; color:#F00;">￥{{ totalprice }}</text>
			</view>
			<view class="grace-shoppingcard-checkout" style="background:linear-gradient(268deg,rgba(235,93,75,1),rgba(253,129,95,1));color: #FFFFFF;" @tap="checkout">立即结算</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
export default {
	data() {
		return {
			// 总价
			totalprice: 0,
			// 选择文本
			selectText: '全选',
			// 购物车数据 可以来自 api 请求或本地数据
			shoppingCard: []
		};
	},
	onLoad: function() {
		
		// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数
	},
	onShow: function() {
		if (!uni.getStorageSync('userInfo')) {
			uni.navigateTo({
				url: '../login/login'
			});
		}else {
			this.getCartData();
		}
	},
	methods: {
		getCartData: function() {
			this.gRequest.get(
				'/api_cart/cartlist',
				{
					member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id
				},
				res => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].checked = true
						res.data[i].quantity = Number(res.data[i].quantity)
					}
					this.shoppingCard = res.data
					this.countTotoal();
				}
			);
		},
		tohome: function() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		//计算总计函数
		countTotoal: function() {
			var total = 0;
			for (var i = 0; i < this.shoppingCard.length; i++) {
				if (this.shoppingCard[i].checked) {
					total += Number(this.shoppingCard[i].price) * Number(this.shoppingCard[i].quantity);
				}
			}
			this.totalprice = total;
		},
		numberChange: function(data) {
			if(data[0]!=data[2]) {
				if(Number(data[0]>Number(data[2]))) {
					this.gRequest.get(
						'/api_cart/addproductnum',
						{
							member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
							product_id:this.shoppingCard[data[1]].product_id
						},
						res => {
							this.shoppingCard[data[1]].quantity = data[0];
							//计算总价
							this.countTotoal();
						}
					);
				}else {
					this.gRequest.get(
						'/api_cart/subtractproductnum',
						{
							member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
							product_id:this.shoppingCard[data[1]].product_id
						},
						res => {
							this.shoppingCard[data[1]].quantity = data[0];
							//计算总价
							this.countTotoal();
						}
					);
				}
			}
		},
		removeGoods: function(e) {
			var index = e.currentTarget.id
			uni.showModal({
				title: '确认提醒',
				content: '您确定要移除此商品吗？',
				success: e => {
					if (e.confirm) {
						this.gRequest.get(
							'/api_cart/deletecartproduct',
							{
								member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
								product_id:this.shoppingCard[index].product_id
							},
							res => {
								uni.showToast({ title: "删除成功", icon:"none" });
								this.shoppingCard.splice(index, 1);
								//计算总价
								this.countTotoal();
							}
						);
					}
				}
			});
		},
		checkout: function() {
			let temp_arr = []
			for(let i = 0;i < this.shoppingCard.length;i++) {
				if(this.shoppingCard[i].checked) {
					temp_arr.push(this.shoppingCard[i])
				}
			}
			if(temp_arr.length==0) {
				uni.showToast({ title: "请至少选择一件商品进行结算", icon:"none" });
				return
			}
			uni.removeStorageSync('currentAddress');
			uni.setStorage({
				key:"orderList",
				data: JSON.stringify(temp_arr),
				success:function(){
					uni.navigateTo({
						url: '../shoppingCard/orderComfirm'
					});
				}
			})
		},
		// 商品选中
		itemChange: function(e) {
			var index = e;
			this.shoppingCard[index].checked = this.shoppingCard[index].checked?false:true;
			this.shoppingCard = this.shoppingCard;
			this.countTotoal();
		},
		itemChangeAll: function(e) {
			this.selectText = e[0] ? '全选' : '全不选';
			for (var i = 0; i < this.shoppingCard.length; i++) {
				this.shoppingCard[i].checked = e[0];
			}
			this.countTotoal();
		},
		goback: function() {
			uni.navigateBack({});
		}
	},
	components: {
		gracePage,
		graceNumberBox,
		graceEmpty,
		graceCheckBtn,
		graceHeader
	}
};
</script>
<style>
page {
	background: #f8f8f8;
}
.empty-view {
	width: 280rpx;
	height: 280rpx;
	border-radius: 280rpx;
	background-color: #f6f7f8;
	margin-top: 30rpx;
}
.empty-img {
	width: 220rpx;
	height: 200rpx;
	margin: 40rpx;
	border-radius: 200rpx;
}
.grace-shoppingcard {
	background: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.grace-shopp-name {
	width: 500rpx;
}
.grace-shopp-go {
	width: 120rpx;
}
.grace-shoppingcard-goods {
	margin: 10rpx 0;
	display: flex;
	flex-wrap: nowrap;
}
.grace-shoppingcard-goods-checkbtn {
	width: 60rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-image {
	width: 120rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-goods-body {
	width: 100%;
}
.grace-shoppingcard-goods-title {
	line-height: 1.4em;
}
.grace-shoppingcard-goods-price {
	color: #f00;
	font-size: 32rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.grace-shoppingcard-goods-number {
	padding: 2px 0;
}
.grace-shoppingcard-remove {
	display: block;
	text-align: right;
	line-height: 50rpx;
	margin-top: 30rpx;
	color: #cccccc;
	font-size: 24rpx;
}
.grace-shoppingcard-checkbtn {
	width: 200rpx;
	margin-left: 50rpx;
	flex-shrink: 0;
}
.grace-shoppingcard-count {
	width: 600rpx;
}
.grace-shoppingcard-checkout {
	width: 280rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
	flex-shrink: 0;
}
.cart .grace-page-footer {
	position: relative;
}
</style>
